<template>
  <div class="panel panel-default">
    <div class="panel-heading  position-relative">
      <TitleTip :title=titleDetail position="bottom">
        <span class="fs-6 fw-lighter position-absolute end-0" style="margin-right: 10px">
            {{this.$store.state.user.userArms.length}}/{{Math.ceil((this.$store.state.user.userInfo.soul+this.$store.state.user.userInfo.buff.soul)/10)}}
          </span>
        <h3 class="panel-title">
          {{ title }}
        </h3>
      </TitleTip>
    </div>
    <div class="panel-body">
      <ul class="list-group">
        <template v-for="(item,key) in this.$store.state.user.userArms" :key="item" >
          <li class="list-group-item">
            <div class="panel-nav" data-bs-toggle="collapse" :href="'#collapseArms'+key" role="button" aria-expanded="false"
                 :aria-controls="'collapseArms'+key">
              <div class="btn-group pull-right" role="group">
                <button @click="remove(key)" class="btn btn-default btn-xs">卸下</button>
              </div>
              <button type="button" class="btn btn-xs" style="font-size: 6px" disabled>{{ item.levelName }}</button>
              <TitleTip :title="
                      (item.hpBuff>0?item.hpBuff+'血量、':'')+
                      (item.hotBuff>0?item.hotBuff+'回血速度、':'')+
                      (item.levelUpOddsBuff>0?item.levelUpOddsBuff+'突破概率、':'')+
                      (item.travelSpeedBuff>0?item.travelSpeedBuff+'历练速度、':'')"
                        position="bottom">
                {{ item.name ?? '' }}
              </TitleTip>
            </div>
          </li>
          <li class="list-group-item collapse" :id="'collapseArms'+key">
            <ul class="list-group list-group-compact">
              <li :class="item.hpBuff<=0?'d-none':''" class="list-group-item">增加{{item.hpBuff}}血量</li>
              <li :class="item.hotBuff<=0?'d-none':''" class="list-group-item">增加{{item.hotBuff}}回血速度</li>
              <li :class="item.levelUpOddsBuff<=0?'d-none':''" class="list-group-item">增加{{item.levelUpOddsBuff}}的突破概率</li>
              <li :class="item.travelSpeedBuff<=0?'d-none':''" class="list-group-item">增加{{item.travelSpeedBuff}}的历练速度</li>
            </ul>
          </li>
        </template>
      </ul>
    </div>
  </div>
</template>

<script>
import TitleTip from './TitleTip.vue'

export default {
  name: 'UserArms',
  data: function () {
    return {
      title: "炼化法宝",
      titleDetail:"已炼化法宝，可增加属性：血量、回血速度、历练速度、突破概率"
    }
  },
  components: {
    TitleTip
  },
  methods: {
    remove(key){
      let arms = this.$store.state.user.userArms[key];
      this.$store.state.user.userBox.arms.unshift(arms);
      this.$store.state.user.userArms.splice(key,1)
      // 清理buff
      this.$store.state.user.userInfo.buff.levelUpOdds -= arms.levelUpOddsBuff
      this.$store.state.user.userInfo.buff.travelSpeed -= arms.travelSpeedBuff
      // this.$store.state.user.userInfo.buff.hp -= arms.hpBuff
      this.$store.state.user.userInfo.buff.hot -= arms.hotBuff
      if(this.$store.state.user.userInfo.hp > this.$store.state.user.userInfo.hpTotal){
        this.$store.state.user.userInfo.hp = this.$store.state.user.userInfo.hpTotal
      }
      this.$store.commit('user/updateMonth', this.$store.state.user.other.month);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
